<template>
  <div class="page">
    <!-- <Close @click="handleClose"></Close> -->
    <Card title="当前隐患数量">
      <textNum :data="dqyhsl"></textNum>
      <BarVue ref="barChart"> </BarVue>
    </Card>
    <Card title="隐患整改情况">
      <PieVue ref="yhzgChart"> </PieVue>
    </Card>
    <Table
      ref="yhtable"
      title="隐患整改列表"
      :headers="['隐患描述', '责任人', '整改期限']"
      :propsData="[
        'hiddenInfo',
        'rectificationUserName',
        'rectificationEndTime',
      ]"
      :limitScrollNum="5"
    ></Table>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import Close from "../components/close.vue";
import AlarmNum from "../components/AlarmNum.vue";
import Echarts from "../components/Echarts.vue";
import CcgTable from "../components/ccgTable.vue";
import BorderCard from "../components/borderCard.vue";
import { apis } from "@/api/threeD.js";
import { apis as APIS } from "@/api/hdwarning/immediate.js";
import { gkAndyh, dqyhsl, lsyhqs, yhzgbt, yhzglb } from "@/api/threeD";
import textNum from "../echarts/textNum.vue";
import Card from "../components/Card.vue";
import PieVue from "../echarts/pie.vue";
import BarVue from "../echarts/line2.vue";
import Table from "../components/table.vue";

export default defineComponent({
  name: "LeftMenu",
  components: {
    AlarmNum,
    CcgTable,
    Close,
    BorderCard,
    Echarts,
    textNum,
    Card,
    PieVue,
    Table,
    BarVue,
  },

  data() {
    return {
      marginBottom: 30,
      marginTop: 30,
      dqyhsl: [],
    };
  },
  methods: {
    handleClose() {},
    initData() {
      // apis.baojing().then((res) => {
      //   this.$refs.alarmnum.setData(res.data);
      // });
      // APIS.sysDangerPoint().then((res) => {
      //   this.$refs.ccgtable.setData(res.data);
      // });
      dqyhsl().then((res) => {
        this.dqyhsl = res.data;
      });
      lsyhqs().then((res) => {
        this.$refs.barChart.setData({
          zd: res.data.map((item) => item.ybCount).reverse(),
          yb: res.data.map((item) => item.zdCount).reverse(),
          xAxis: res.data.map((item) => item.createTime).reverse(),
        });
      });
      yhzglb({
        hiddenProgress: "待整改",
      }).then((res) => {
        this.$refs.yhtable.setData(res.rows);
      });
      yhzgbt().then((res) => {
        let total = 0;
        const { hidden } = res.data;
        hidden.forEach((item) => (total += item.count));
        this.$refs.yhzgChart.setData({
          total: total,
          data: hidden.map((item) => ({
            name: item.hidden_progress,
            value: item.count,
          })),
          color: [
            "#FF5F55",
            "#FF8C21",
            "#27CBFF",
            "#A394FF",
            "#C2E536",
            "#27CBFF",
          ],
          center: "隐患总数",
          top: "10%",
        });
      });
    },
  },
  mounted() {
    this.initData();
  },
});
</script>

<style lang="scss" scoped>
.left-menu {
  position: relative;
  width: 360px;
  height: 934px;
  color: #fff;

  &-close {
    position: absolute;
    top: 13px;
    right: 7px;
    z-index: 9;
    transform: rotate(-17deg);
    cursor: pointer;
  }
}

.page {
  padding-top: 15px;
  background-image: url("../assets/pagebg.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  width: 418px;
  height: 934px;
  backdrop-filter: blur(10px);
  overflow: hidden;
  color: #fff;
}
</style>
